<template>
  <div class="studentEntryContainer">
    <el-dialog
      :visible.sync="isShow"
      :close-on-click-modal="modalclose"
      custom-class="el-dialog-bg"
      :before-close="handleClose"
    >
      <div slot="title" class="panel_title">
        <span>学员进班</span>
      </div>
      <div class="studententrylist">
        <div class="dialog">
          <div class="classinfo" v-if="classinfo">
            <el-row>
              <el-col :span="8">
                <span class="spanlabelweight">{{classinfo.className}}</span>
                <span class="spanlabelweight">({{classinfo.classNo}})</span>
              </el-col>
              <el-col :span="8">
                <span class="spanlabel">开班日期：</span>
                <span class="spanlabelweight">{{classinfo.createTime.split(' ')[0]}}</span>
              </el-col>
              <el-col :span="8">
                <span class="spanlabel">课程名称：</span>
                <span class="spanlabelweight">{{classinfo.courseName||""}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="studentlist" v-if="classinfo">
            <div style="overflow:hidden;">
              <div style="float:left;padding:0.1rem;">
                <span class="spanlabel">
                  有
                  <span class="spanlabelweight">{{studentEntryList.length}}</span>位同学符合进班条件
                </span>
              </div>
              <div style="float:right">
                <el-button class="enterBtn" type="primary" @click="importClassStudent">批量导入</el-button>
              </div>
            </div>
            <br />
            <div class="line"></div>
            <div class="tablecss">
              <table style="width:100%;table-layout:fixed;" cellpadding="0" cellspacing="0">
                <thead>
                  <tr>
                    <th
                      style="min-width:0.3rem;line-height: 0.42rem;display: flex;justify-content: center;"
                    >
                      <div
                        class="checkyes"
                        v-if="allchecked"
                        @click="CheckAll"
                        style="margin-top:0.14rem;"
                      ></div>
                      <div class="checkno" v-else @click="CheckAll" style="margin-top:0.14rem;"></div>
                      <!--<el-checkbox  v-model="allchecked" @change="CheckAll"></el-checkbox>-->
                    </th>
                    <th style="min-width:0.2rem;">序号</th>
                    <th>学员</th>
                    <th>年龄</th>
                    <th>家长</th>
                    <th>联系电话</th>
                    <th>报名课程</th>
                    <th>课时</th>
                    <th>学员状态</th>
                    <th style="max-width:1rem;">末次沟通内容</th>
                    <th>备注</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody v-if="studentEntryList.length>0">
                  <tr v-for="li in studentEntryList">
                    <td
                      align="center"
                      style="line-height: 0.42rem;display: flex;justify-content: center;"
                    >
                      <div
                        class="checkyes"
                        v-if="li.checked"
                        @click="CheckSimple(li.index)"
                        style="margin-top:0.14rem;"
                      ></div>
                      <div
                        class="checkno"
                        v-else
                        @click="CheckSimple(li.index)"
                        style="margin-top:0.14rem;"
                      ></div>
                    </td>
                    <th>{{li.index}}</th>
                    <td align="center">
                      <span>{{li.studentName}}</span>
                      <span v-if="li.genderMode==1">（男）</span>
                      <span v-if="li.genderMode==2">（女）</span>
                    </td>
                    <td align="center">{{li.age}}</td>
                    <td align="center">{{li.parentName}}</td>
                    <td align="center">{{li.phone}}</td>
                    <td align="center">{{li.courseName}}</td>
                    <td align="center">{{li.courseNum}}</td>
                    <td align="center">
                      <span>正常</span>
                    </td>
                    <td align="center">
                      <div
                        style="cursor: pointer;line-height: 0.52rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;"
                        :title="li.lastVisitContent"
                      >{{li.lastVisitContent}}</div>
                    </td>
                    <td align="center">{{li.remark}}</td>
                    <td align="center">
                      <el-button @click="simpleEnterClass(li)" type="text" size="small">进班</el-button>
                    </td>
                  </tr>
                </tbody>
                <tbody v-else>
                  <tr>
                    <td colspan="12" align="center">暂无数据</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="btnEnter">
              <el-button class="enterBtn" @click="enterClass">进班</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <classImportStudent ref="classImportStudent" @callback="closeClassImportStudent"></classImportStudent>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import classImportStudent from "./classImportStudent";
let vm;
export default {
  data() {
    return {
      modalclose: false,
      allchecked: false,
      classinfo: null,
      studentList: []
    };
  },
  components: {
    classImportStudent
  },
  methods: {
    importClassStudent() {
      this.$refs.classImportStudent.init({classId:this.classinfo.classId});
    },
    closeClassImportStudent(){
      this.$store.dispatch("studentEntry/getStudentEntryList", this.classinfo.classId);
    },
    initDialog() {
      this.studentList = [];
      this.allchecked = false;
    },
    setClassInfo(data) {
      this.classinfo = data;
    },
    handleClose() {
      this.initDialog();
      this.$store.dispatch("studentEntry/hidestudentEntryPanel");
    },
    /**
     * 全选
     */
    CheckAll() {
      if (this.allchecked) {
        this.allchecked = false;
        for (let i = 0; i < this.studentEntryList.length; i++) {
          this.studentEntryList[i].checked = false;
        }
      } else {
        this.allchecked = true;
        for (let i = 0; i < this.studentEntryList.length; i++) {
          this.studentEntryList[i].checked = true;
        }
      }
      this.handleSelectionChange(this.studentEntryList);
    },
    /**
     * 单个学员选
     */
    CheckSimple(index) {
      //处理单选

      if (this.studentEntryList[index - 1].checked) {
        this.studentEntryList[index - 1].checked = false;
      } else {
        this.studentEntryList[index - 1].checked = true;
      }

      //处理全选
      let sum = 0;

      for (let i = 0; i < this.studentEntryList.length; i++) {
        if (this.studentEntryList[i].checked) {
          sum++;
        }
      }
      if (sum == this.studentEntryList.length) {
        this.allchecked = true;
      } else {
        this.allchecked = false;
      }

      this.studentList = [];
      for (let i = 0; i < this.studentEntryList.length; i++) {
        if (this.studentEntryList[i].checked) {
          this.studentList.push({
            studentId: this.studentEntryList[i].studentId,
            classId: this.classinfo.classId,
            studentTuitionMode: this.studentEntryList[i].studentStatus,
            coursePackageId: this.studentEntryList[i].coursePackageId,
            studentCourseId: this.studentEntryList[i].studentCourseId
          });
        }
      }
    },
    /**
     * 选中学员信息
     */
    handleSelectionChange(selection) {
      if (selection.length <= 0) {
        this.studentList = [];
        return;
      }
      this.studentList = [];
      for (let i = 0; i < selection.length; i++) {
        if (selection[i].checked) {
          this.studentList.push({
            studentId: selection[i].studentId,
            classId: this.classinfo.classId,
            studentTuitionMode: selection[i].studentStatus,
            coursePackageId: selection[i].coursePackageId,
            studentCourseId: selection[i].studentCourseId
          });
        }
      }
    },
    /**
     * 学员列表进班
     */
    enterClass() {
      let studentNum = this.classinfo.recruitNum - this.classinfo.studentNum; //可进班学员人数

      if (this.studentList.length <= 0) {
        this.$message({
          message: "请选中进班学员",
          type: "warning"
        });
        return;
      }
      if (this.studentList.length > studentNum) {
        this.$message({
          message: "班级人数过多",
          type: "warning"
        });
        return;
      }

      let paras = this.studentList;
      console.log(paras);
      let dataparas = { classId: this.classinfo.classId, studentId: [] }; //获取进班学员id与班级id
      for (let i = 0; i < paras.length; i++) {
        dataparas.studentId.push(paras[i].studentId);
      }

      api.studentEnterClass(paras).then(function(data) {
        if (data.result == "操作成功") {
          vm.$message({
            message: "进班成功",
            type: "success"
          });
        }
        vm.$emit("listenToChildEvent", dataparas);
        vm.$store.dispatch("studentEntry/hidestudentEntryPanel");
        vm.initDialog();
      });
    },
    /**
     * 单个学员进班
     */
    simpleEnterClass(row) {
      let studentNum = this.classinfo.recruitNum - this.classinfo.studentNum; //可进班学员人数
      let dataparas = {
        classId: this.classinfo.classId,
        studentId: [row.studentId]
      }; //获取进班学员id与班级id
      this.studentList = [];
      this.studentList.push({
        studentId: row.studentId,
        classId: this.classinfo.classId,
        studentTuitionMode: row.studentStatus,
        coursePackageId: row.coursePackageId,
        studentCourseId: row.studentCourseId
      });
      //				if(this.studentList.length<=0){
      //					this.$message({
      //			          message: '请选中进班学员',
      //			          type: 'warning'
      //			        });
      //					return;
      //				}
      if (this.studentList.length > studentNum) {
        this.$message({
          message: "班级人数过多",
          type: "warning"
        });
        return;
      }
      let paras = [
        {
          studentId: row.studentId,
          studentCourseId: row.studentCourseId,
          classId: this.classinfo.classId,
          studentTuitionMode: row.studentStatus,
          coursePackageId: row.coursePackageId
        }
      ];

      api.studentEnterClass(paras).then(function(data) {
        if (data.result == "操作成功") {
          vm.$message({
            message: "进班成功",
            type: "success"
          });
        }
        vm.$emit("listenToChildEvent", dataparas);
        vm.$store.dispatch("studentEntry/hidestudentEntryPanel");
        vm.initDialog();
      });
    }
  },
  computed: {
    ...mapState({
      isShow: state => state.studentEntry.studentEntryDialog
    }),
    ...mapGetters("studentEntry", {
      studentEntryList: "getStudentEntryList"
    }),
    studentlist: {
      get: function() {
        this.allchecked = false;
        let studentlist = [];
        studentlist = this.studentEntryList.map(function(row) {
          return {
            checked: row.checked,
            index: row.index,
            studentName: row.studentName,
            genderMode: row.genderMode,
            age: row.age,
            parentName: row.parentName,
            phone: row.phone,
            courseName: row.courseName,
            courseNum: row.courseNum
          };
        });
        return studentlist;
      },
      set: function(val) {
        console.log(val);
      }
    }
  },
  mounted() {
    vm = this;
  }
};
</script>

<style lang="scss">
@import "@/style/module/utils.scss";
.v-modal {
    z-index: 30 !important;
}
.studentEntryContainer {
  .el-dialog__wrapper{
    z-index: 31 !important;
  }
  .studententrylist {
    width: 100%;
    max-height: 30rem;
    padding: 0 0.31rem 0.3rem 0.31rem;

    .classinfo {
      width: 100%;
      height: 0.3rem;

      line-height: 0.3rem;
    }
    .studentlist {
      width: 100%;
      max-height: 30rem;
      margin-top: 0.1rem;

      .line {
        height: 1px;
        width: inherit;
        background: $partinglineColor;
      }
      .btnEnter {
        height: 0.5rem;
        line-height: 0.5rem;
        margin-top: 0.2rem;
        .enterBtn {
          width: 1.6rem;
          height: 0.4rem;
          font-size: 0.16rem;
          background: #3885f8;
          color: #ffffff;
          border-radius: 0.1rem;
        }
      }
    }
  }

  /**自定义对话框标题样式**/
  .panel_title {
    padding: 0.23rem 0.31rem 0.23rem 0.31rem;
    font-size: 0.22rem;
    font-family: "microsoft yahei";
    color: #333333;
  }
  /**
		 * 自定义对话框样式
		 */
  .el-dialog-bg {
    background: #ffffff;
    width: 10rem;
    border-radius: 0.1rem;
    .el-dialog__header {
      padding: 0px;
    }
    .el-dialog__body {
      padding: 0px !important;
    }
    .el-dialog__footer {
      padding: 0.3rem;
      .footer-btn {
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>